import React, { memo, useCallback, useMemo } from 'react';
import { Card, Button, Tag, Space, Checkbox, Tooltip, Avatar } from 'antd';
import { EditOutlined, DeleteOutlined, EyeOutlined, BookOutlined, UserOutlined, ClockCircleOutlined } from '@ant-design/icons';
import type { ICourseCardProps } from '@/types/components/course';
import { CourseStatusEnum } from '@/types/course';
import styles from './CourseCard.module.css';

/**
 * 课程卡片组件
 * @description 用于显示单个课程的基本信息，支持编辑、删除、查看详情等操作
 */
const CourseCard: React.FC<ICourseCardProps> = memo(({
  course,
  categories,
  onEdit,
  onDelete,
  onViewDetail,
  className,
  showActions = true,
  selectable = false,
  selected = false,
  onSelect
}) => {
  // 处理编辑操作
  const handleEdit = useCallback(() => {
    onEdit?.(course.id);
  }, [course.id, onEdit]);

  // 处理删除操作
  const handleDelete = useCallback(() => {
    onDelete?.(course.id);
  }, [course.id, onDelete]);

  // 处理查看详情操作
  const handleViewDetail = useCallback(() => {
    onViewDetail?.(course.id);
  }, [course.id, onViewDetail]);

  // 处理选择操作
  const handleSelect = useCallback((checked: boolean) => {
    onSelect?.(course.id, checked);
  }, [course.id, onSelect]);

  // 获取课程分类信息
  const courseCategories = useMemo(() => {
    return categories.filter(category => course.categoryIds.includes(category.id));
  }, [categories, course.categoryIds]);

  // 获取状态标签
  const getStatusTag = () => {
    const statusConfig = {
      [CourseStatusEnum.ACTIVE]: { color: 'green', text: '正常' },
      [CourseStatusEnum.SUSPENDED]: { color: 'orange', text: '暂停' },
      [CourseStatusEnum.DELETED]: { color: 'red', text: '已删除' }
    };

    const config = statusConfig[course.status] || { color: 'default', text: '未知' };
    return <Tag color={config.color}>{config.text}</Tag>;
  };

  // 渲染操作按钮
  const renderActions = () => {
    if (!showActions) return null;

    return (
      <Space size="small">
        {onViewDetail && (
          <Tooltip title="查看详情">
            <Button
              type="text"
              size="small"
              icon={<EyeOutlined />}
              onClick={handleViewDetail}
            />
          </Tooltip>
        )}
        {onEdit && (
          <Tooltip title="编辑">
            <Button
              type="text"
              size="small"
              icon={<EditOutlined />}
              onClick={handleEdit}
            />
          </Tooltip>
        )}
        {onDelete && (
          <Tooltip title="删除">
            <Button
              type="text"
              size="small"
              danger
              icon={<DeleteOutlined />}
              onClick={handleDelete}
            />
          </Tooltip>
        )}
      </Space>
    );
  };

  // 渲染卡片标题
  const renderTitle = () => (
    <div className={styles.cardTitle}>
      {selectable && (
        <Checkbox
          checked={selected}
          onChange={(e) => handleSelect(e.target.checked)}
          className={styles.checkbox}
        />
      )}
      <div 
        className={styles.colorIndicator} 
        style={{ backgroundColor: course.color }}
      />
      <BookOutlined className={styles.titleIcon} />
      <span className={styles.courseName}>{course.name}</span>
      {getStatusTag()}
    </div>
  );

  return (
    <Card
      className={`${styles.courseCard} ${className || ''} ${selected ? styles.selected : ''}`}
      title={renderTitle()}
      extra={renderActions()}
      size="small"
      hoverable
    >
      <div className={styles.cardContent}>
        <div className={styles.infoRow}>
          <span className={styles.label}>课程代码：</span>
          <span className={styles.value}>{course.courseCode}</span>
        </div>
        
        <div className={styles.infoRow}>
          <UserOutlined className={styles.teacherIcon} />
          <span className={styles.label}>授课教师：</span>
          <span className={styles.value}>{course.teacher}</span>
        </div>
        
        {course.duration && (
          <div className={styles.infoRow}>
            <ClockCircleOutlined className={styles.durationIcon} />
            <span className={styles.label}>课程时长：</span>
            <span className={styles.value}>{course.duration}分钟</span>
          </div>
        )}
        
        {course.fee && (
          <div className={styles.infoRow}>
            <span className={styles.label}>课程费用：</span>
            <span className={styles.feeValue}>¥{course.fee}</span>
          </div>
        )}
        
        {courseCategories.length > 0 && (
          <div className={styles.categoryRow}>
            <span className={styles.label}>分类：</span>
            <div className={styles.categoryTags}>
              {courseCategories.map(category => (
                <Tag 
                  key={category.id} 
                  color={category.color}
                  className={styles.categoryTag}
                >
                  {category.name}
                </Tag>
              ))}
            </div>
          </div>
        )}
        
        {course.description && (
          <div className={styles.descriptionRow}>
            <span className={styles.label}>描述：</span>
            <span className={styles.description}>{course.description}</span>
          </div>
        )}
      </div>
    </Card>
  );
});

CourseCard.displayName = 'CourseCard';

export default CourseCard;